<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<%@include file="header.jsp" %>
		<link rel="stylesheet" href="resources/css/validationEngine.jquery.css" type="text/css"/>
		<script src="resources/js/popup.js" type="text/javascript"></script>  
		<script>
	    	function doAjaxPost() {
	    		
	    		var EANUCC13 = ($('#btnApply').val() == null) ? "" : $('#btnApply').val();
	    		var name = ($('#name').val() == null) ? "" : $('#name').val();
		        var weight = ($('#weight').val() == null) ? "" : $('#weight').val();
		        var width = ($('#width').val() == null) ? "" : $('#width').val();
		        var color = ($('#color').val() == null) ? "" : $('#color').val();
		        var description = ($('#description').val() == null) ? "" : $('#description').val();
		        var price = ($('#price').val() == null) ? "" : $('#price').val();
		        var warranty = ($('#warranty').val() == null) ? "" : $('#warranty').val();
		        var cboCpu = $('select[name=cboCpu] option:selected').val();
		        var cboGpu = $('select[name=cboGpu] option:selected').val();
		        var cboRam = $('select[name=cboRam] option:selected').val();
		        var numberOfRam = ($('#numberOfRam').val() == null) ? "" : $('#numberOfRam').val();
		        var cboHdd = $('select[name=cboHdd] option:selected').val();
		        var cboBat = $('select[name=cboBat] option:selected').val();
		        var cboAc = $('select[name=cboAc] option:selected').val();
		        
		        $.ajax({
			        type: "POST",
			        url: "editProduct",
			        data: "EANUCC13=" + EANUCC13 + "&name=" + name + "&weight=" + weight + "&width=" + width + "&color=" + color + "&description=" + description + 
			        			"&price=" + price + "&warranty=" + warranty + "&cboCpu=" + cboCpu +
			        			"&cboGpu=" + cboGpu + "&cboRam=" + cboRam + "&numberOfRam=" + numberOfRam + "&cboHdd=" + cboHdd + "&cboBat=" + cboBat + "&cboAc=" + cboAc,
			        success: function(response){

			        $('#popup').html(response);
			        //scrolling to top
			        $('html, body').animate({scrollTop:0}, '400');
					//centering with css
					centerPopup();
					//load popup
					loadPopup();
					
					$("#popupContactClose").click(function(){
						disablePopup();
					});
					//Click out event!
					$("#backgroundPopup").click(function(){
						disablePopup();
					});
					//Press Escape event!
					$(document).keypress(function(e){
						if(e.keyCode==27 && popupStatus==1){
							disablePopup();
						}
					});
			        },
			        error: function(e){
			        alert('Er is iets fout gelopen, probeer opnieuw.');
			        }
				});
	    	}
		</script>
	</head>
	<body>
		<div id="wrapper">
			<div id="splash">
				<img src="resources/images/pic1.jpg" alt="" />
			</div>
			<div id="menu">
				<ul>				
					<li><a href="index">Homepage</a></li>
					<li><a href="notebooks">Notebooks</a></li>
					<li>Account <span class="arrow"></span>
						<ul>
							<c:choose>
								<c:when test="${ firstname != null }">
									<li class="first"><a href="logout">Logout</a></li>
								</c:when>
								<c:when test="${ firstname == null}">
									<li class="first"><a href="login">Inloggen</a></li>
									<li><a href="registratie">Registreren</a></li>
								</c:when>
							</c:choose>	
						</ul>
					</li>
					<li><a href="about">About</a></li>
					<c:choose>
						<c:when test="${ admin == 0 || admin == null }">
							<li class ="cartI"> <img src="resources/images/shopping_cart.png" alt="" /></li>
							<li class ="cart"><a href="winkelwagen">Winkelwagen</a></li>
						</c:when>
						<c:when test="${ admin == 1 }">
							<li class ="cartI"> <img src="resources/images/adminmodule.png" alt="" /></li>
							<li class ="cart"><a href="admin">Admin module</a></li>
						</c:when>
					</c:choose>		
				</ul>				
				<br class="clearfix" />
			</div>
			<div id="page">
				<div id="content">
					<div class="box">
						<h1>Product aanpassen</h1>
						<br/>
						<form id="editProduct" onsubmit="return false">
						<div class="layoutInput">
							<c:forEach items="${products}" var="MyProduct">
								<table class="specList" cellspacing="0" >
									<tr><th colspan="2" >Algemeen</th></tr>
										<tr>
											<td>Naam:</td>
											<td><input class="validate[required, maxSize[255]]" name="name" id="name" type="text" value="${MyProduct.name}" /></td>
										</tr>
										<tr>
											<td>Gewicht:</td>
											<td><input class="validate[required, custom[number], min[0], max[10]]" name="weight" id="weight" type="text" value="${MyProduct.weight}" /></td>
										</tr>
										<tr>
											<td>Breedte:</td>
											<td><input class="validate[required, custom[integer], min[0], max[500]]" name="width" id="width" type="text" value="${MyProduct.width}" /></td>
										</tr>
										<tr>
											<td>Kleur:</td>
											<td><input class="validate[required, custom[onlyLetterSp], maxSize[255]]" name="color" id="color" type="text" value="${MyProduct.color}" /></td>
										</tr>
										<tr>
											<td>Beschrijving:</td>
											<td><textarea class="validate[required, maxSize[500]]" name="description" id="description">${MyProduct.description}</textarea></td>
										</tr>
										<tr>
											<td>Garantieduur:</td>
											<td><input class="validate[required, custom[integer], max[100]]" name="warranty" id="warranty" type="text" value="${MyProduct.durationOfWarrantyMonths}" /></td>
										</tr>
										<tr>
											<td>Prijs:</td>
											<td><input class="validate[required, custom[number], min[0], max[5000]]" name="price" id="price" type="text" value="${MyProduct.price}" /></td>
										</tr>
									<tr><th colspan="2" >CPU</th></tr>
										<tr>
											<td>Processor:</td>
											<td>
												<select name="cboCpu" id="cboCpu" class="submitText" >
													<c:forEach items="${cpu}" var="Cpu">
														<c:choose>
															<c:when test="${Cpu.cpu_id == MyProduct.cpu.cpu_id}">
																<option value="${Cpu.cpu_id}" selected="selected">${Cpu.name} ${Cpu.CPUSpeed}</option>
															</c:when>
															<c:when test="${Cpu.cpu_id != MyProduct.cpu.cpu_id}">
																<option value="${Cpu.cpu_id}">${Cpu.name} ${Cpu.CPUSpeed}</option>
															</c:when>
														</c:choose>
													</c:forEach>
												</select>
											</td>
										</tr>
									<tr><th colspan="2" >GPU</th></tr>
										<tr>
											<td>Grafische kaart:</td>
											<td>
												<select name="cboGpu" id="cboGpu" class="submitText" >
													<c:forEach items="${graph}" var="GraphicsCard">
														<c:choose>
															<c:when test="${GraphicsCard.graphC_id == MyProduct.graphicsCard.graphC_id}">
																<option value="${GraphicsCard.graphC_id}" selected="selected">${GraphicsCard.name}</option>
															</c:when>
															<c:when test="${GraphicsCard.graphC_id != MyProduct.graphicsCard.graphC_id}">
																<option value="${GraphicsCard.graphC_id}">${GraphicsCard.name}</option>
															</c:when>
														</c:choose>
													</c:forEach>
												</select>
											</td>
										</tr>
									<tr><th colspan="2" >RAM</th></tr>
										<tr>
											<td>Geheugen:</td>
											<td>
												<select name="cboRam" id="cboRam" class="submitText">
													<c:forEach items="${ram}" var="Ram">
														<c:choose>
															<c:when test="${Ram.ram_id == MyProduct.ram.ram_id}">
																<option value="${Ram.ram_id}" selected="selected">${Ram.memoryCapacity} ${Ram.version}</option>
															</c:when>
															<c:when test="${Ram.ram_id != MyProduct.ram.ram_id}">
																<option value="${Ram.ram_id}">${Ram.memoryCapacity} ${Ram.version}</option>
															</c:when>
														</c:choose>
													</c:forEach>
												</select>
											</td>
										</tr>
										<tr>
											<td>Aantal modules:</td>
											<td>
												<input class="validate[required, custom[integer], min[0], max[10]]" name="numberOfRam" id="numberOfRam" type="text" value="${MyProduct.ramInProduct.number }"/>
											</td>
										</tr>
									<tr><th colspan="2" >HDD</th></tr>
										<tr>
											<td>Opslag:</td>
											<td>
												<select name="cboHdd" id="cboHdd" class="submitText" >
													<c:forEach items="${hdd}" var="InternalHD">
														<c:choose>
															<c:when test="${InternalHD.intHD_id == MyProduct.internal_hd.intHD_id}">
																<option value="${InternalHD.intHD_id}" selected="selected">${InternalHD.manufacturer} ${InternalHD.capacityOfStorage}GB</option>
															</c:when>
															<c:when test="${InternalHD.intHD_id != MyProduct.internal_hd.intHD_id}">
																<option value="${InternalHD.intHD_id}">${InternalHD.manufacturer} ${InternalHD.capacityOfStorage}GB</option>
															</c:when>
														</c:choose>
													</c:forEach>
												</select>
											</td>
										</tr>
									<tr><th colspan="2" >Batterij</th></tr>
										<tr>
											<td>Levensduur:</td>
											<td>
												<select name="cboBat" id="cboBat" class="submitText" >
													<c:forEach items="${bat}" var="Battery">
														<c:choose>
															<c:when test="${Battery.bat_id == MyProduct.battery.bat_id}">
																<option value="${Battery.bat_id}" selected="selected">${Battery.lifespan} jaar</option>
															</c:when>
															<c:when test="${Battery.bat_id != MyProduct.battery.bat_id}">
																<option value="${Battery.bat_id}">${Battery.lifespan} jaar</option>
															</c:when>
														</c:choose>
													</c:forEach>
												</select>
											</td>
										</tr>
									<tr><th colspan="2" >Adapter</th></tr>
										<tr>
											<td>Wattage:</td>
											<td>
												<select name="cboAc" id="cboAc" class="submitText" >
													<c:forEach items="${ac}" var="ACAdapter">
														<c:choose>
															<c:when test="${ACAdapter.adap_id == MyProduct.acAdapter.adap_id}">
																<option value="${ACAdapter.adap_id}" selected="selected">${ACAdapter.wattage} watt</option>
															</c:when>
															<c:when test="${ACAdapter.adap_id != MyProduct.acAdapter.adap_id}">
																<option value="${ACAdapter.adap_id}">${ACAdapter.wattage} watt</option>
															</c:when>
														</c:choose>
													</c:forEach>
												</select>
											</td>
										</tr>
									<tr><th colspan="2" >
										<div class="floatRight">
											<button class="submit" type="submit" onclick="if (jQuery('#editProduct').validationEngine('validate')) { doAjaxPost(); }" name="btnApply" id="btnApply" value="${MyProduct.EAN_UCC_13}">Product aanpassen</button>
										</div>
									</th></tr>
								</table>
							</c:forEach>
						</div>
						</form>
					</div>
					<br class="clearfix" />
				</div>
				<div id="sidebar">
					<div class="box" >
						<h3>Mijn Account</h3>
						<c:choose>
							<c:when test="${firstname != null}">
								Welkom, <a href="account" ><c:out value="${firstname}"></c:out></a>
							</c:when>
							<c:when test="${firstname == null}">
								Log nu in !
							</c:when>
						</c:choose>
					</div>
					<div class="box">
						<h3>contact</h3>
						<p>
							Neem contact op door <a href="mailto:info@notebookshop.com">hier</a> te klikken.							
						</p>
					</div>
				</div>
				<br class="clearfix" />
			</div>
		</div>
		<div id="footer">
		</div>
		<div id="popup">
		</div>
		<script src="resources/js/jquery.validationEngine-nl.js" type="text/javascript" charset="utf-8"></script>
		<script src="resources/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(document).ready(function(){
		    	$("#editProduct").validationEngine();
		  	});
		</script>
	</body>
</html>